<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>新建提醒</title>
    <script src="../js/jquery-2.1.4.min.js"></script>
    <script src="../js/mui.min.js"></script>
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../css/cw.css"/>
    <script src="../js/global.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
    <script type="text/javascript" src="../js/public.js" ></script>
    <script type="text/javascript" src="../js/app/me-remind-add.js" ></script>
    <script type="text/javascript" charset="UTF-8">
      	mui.init();
    </script>
    <style type="text/css">
   		.mui-dtpicker{position:relative;z-index:0;}  
   		.corporeity-btn{padding:0px;} 
   		.mui-checkbox input[type=checkbox]:checked:before{color:#8dc21f;}
   		.mui-switch.mui-active {border-color:#8dc21f;background-color:#8dc21f;}
   		.mui-dtpicker{z-index: 1;}
   		body,html{height:715px !important;overflow: hidden;}
    </style>
   
</head>
<body>
	<header id="header" class="mui-bar mui-bar-nav">
		<i class="mui-icon mui-icon-back mui-action-back"></i>
		<h1 class="mui-title ">新建提醒</h1>
		<span class="mui-pull-right overWarn"style="line-height:44px;">完成</span>
	</header> 
	<div id="content" class="mui-content"></div>
	<div class="mui-table-view mui-table-view-cell ">
		<a href="#chiyao3">
			<div class="mui-navigate-right">
				<li>重复</li>
				<li class="mui-h6 week">选择星期</li>
			</div>
		</a>
	</div>
	<div class="mui-table-view table-view-cell bell">
		<div class="mui-navigate-right">
			<li>铃声</li>
			<li class="mui-h6 lingsheng">ring</li>
		</div>
	</div>
	<div class="mui-table-view table-view-cell ">
		<div class="">
			<li>震动
				<div class="mui-switch mui-switch-mini mui-pull-right zhendong mui-active">
					<div class="mui-switch-handle"></div>
				</div>
			</li>
			<li class="mui-h6 shock">震动</li>
		</div>
	</div>
	<div class="mui-table-view mui-table-view-cell ">
		<a href="#chiyao">
			<div class="mui-navigate-right">
				<li>吃药注意事项</li>
				<li class="mui-h6 cpill">备注</li>
			</div>
		</a>
	</div>
	<div class="mui-table-view mui-table-view-cell ">
		<a href="#chiyao2">
			<div class="mui-navigate-right">
				<li>家庭人员注意事项</li>
				<li class="mui-h6 fpill">备注</li>
			</div>
		</a>
	</div>
	<div class="mui-h5 remind-list-time"><!--2小时31分后响铃-->时间选择</div>
	<button id='demo5' data-options='{"type":"time"}' class="btn mui-btn mui-btn-block"style="display: none;">选择时间 ...</button>
	<div id="chiyao" class="mui-popover mui-popover-bottom mui-popover-action"> 
		<div class="table-view-cell background remind-bottom-1">
			<div class="mui-text-center">吃药注意事项</div>
			<textarea name="" rows="1" cols=""placeholder="请输入吃药注意事项" class="cpills"></textarea>
		<div class="overflow-h doctor-nav corporeity-btn ">
			<a href="#chiyao">
				<button class="background-y mui-btn mui-btn-block mui-pull-left">取消</button>
				<button class="background-y mui-btn mui-btn-block mui-pull-right csure">确定</button>
			</a>
		</div>
		</div>
	</div>	
	<div id="chiyao2" class="mui-popover mui-popover-bottom mui-popover-action"> 
		<div class="table-view-cell background remind-bottom-1">
			<div class="mui-text-center">家庭成员注意事项</div>
			<textarea name="" rows="1" cols=""placeholder="请输入家庭成员注意事项" class="fpills"></textarea>
		<div class="overflow-h doctor-nav corporeity-btn">
			<a href="#chiyao2">
				<button class="background-y mui-btn mui-btn-block mui-pull-left">取消</button>
				<button class="background-y mui-btn mui-btn-block mui-pull-right fsure" >确定</button>
			</a>
		</div>
		</div>
	</div>	
	<div id="chiyao3" class="mui-popover mui-popover-bottom mui-popover-action"> 
		<div class="background remind-bottom-1 ">
			<div class="mui-text-center border-bottom-1 table-view-cell">
				<span style="padding-top: 8px;display: inline-block;">重复</span>
				<div class="mui-switch mui-switch-mini mui-pull-right chongfu">
					<div class="mui-switch-handle"></div>
				</div>
			</div>
			<div class="">
				<div class="table-view-cell mui-checkbox border-bottom-1">
					<label>星期一</label>
					<input name="radio1" type="checkbox">
				</div>
				<div class="table-view-cell mui-checkbox border-bottom-1">
					<label>星期二</label>
					<input name="radio1" type="checkbox">
				</div>
				<div class="table-view-cell mui-checkbox border-bottom-1">
					<label>星期三</label>
					<input name="radio1" type="checkbox">
				</div>
				<div class="table-view-cell mui-checkbox border-bottom-1">
					<label>星期四</label>
					<input name="radio1" type="checkbox">
				</div>
				<div class="table-view-cell mui-checkbox border-bottom-1">
					<label>星期五</label>
					<input name="radio1" type="checkbox">
				</div>
				<div class="table-view-cell mui-checkbox border-bottom-1">
					<label>星期六</label>
					<input name="radio1" type="checkbox">
				</div>
				<div class="table-view-cell mui-checkbox border-bottom-1">
					<label>星期日</label>
					<input name="radio1" type="checkbox">
				</div>
			</div>
			
		<div class="overflow-h doctor-nav corporeity-btn wek" style="margin:0px 15px;padding-bottom: 11px;">
			<span class="we">
				<a href="#chiyao3">
					<button class="background-y mui-btn mui-btn-block mui-pull-left">取消</button>
				</a>
			</span>
			<span class="we">
				<a href="#chiyao3">
					<button class="background-y mui-btn mui-btn-block mui-pull-right">确定</button>
				</a>
			</span>
		</div>
		</div>
	</div>
	<span class="hours" style="display: none;"></span>
	<span class="minutes" style="display: none;"></span>
</body>

<script src="../js/mui.picker.min1.js"></script>
<script>
	(function($) {
		var d=new Date(); 
		var hours = d.getHours(); 
		var minute = d.getMinutes();
		$.init();
		var result = $('.remind-list-time')[0];
		var aaa = $('.hours')[0];
		var bbb = $('.minutes')[0];
		var btns = $('.btn');
		btns.each(function(i, btn) {
			var optionsJson = this.getAttribute('data-options') || '{}';
			var options = JSON.parse(optionsJson);
			var id = this.getAttribute('id');
			var picker = new $.DtPicker(options);
			picker.show(function(rs) {
				var h = parseInt(rs.text1) - parseInt(hours);
				var m = parseInt(rs.text2) - parseInt(minute);
				console.log(rs.text1+" "+rs.text2); 
				console.log(h+" "+m);
				if(h < 0){
					var a = String(h).substring(1);
					console.log(a);
					h = parseInt(a);
					h -= 24;
					h = String(h).substring(1);
				}
				if(m < 0){
					if(parseInt(rs.text1) == parseInt(hours)){
						h = 23;
					}
					m = String(m).substring(1);
					m = parseInt(m);
					m -= 60 ;
					m = String(m).substring(1);
				}
				result.innerText = h+'小时'+m+'分钟后响铃';  
				aaa.innerText = rs.text1;
				bbb.innerText = rs.text2;
//				picker.dispose();
				
			});
		});
	})(mui);
</script>
<script type="text/javascript">
	$(".mui-backdrop").remove();
	$(".mui-dtpicker").on("tap",function(){
		$("body,html").animate({scrollTop:100},500);
	})
	$(".mui-dtpicker-header > button:eq(0)").css({"opacity":0}).attr({"disabled":"disabled"});
	mui.back = function() {
		plus.webview.currentWebview().close();
	};
</script>

</html>